<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <!--查询表单-->
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

                <el-form-item :label="$t('NGBarcode.materialCode')" prop="materialCode">
                    <el-input v-model="state.queryForm.materialCode" clearable
                        :placeholder="$t('NGBarcode.enterMaterialCode')" />
                </el-form-item>

                <!-- <el-form-item :label="$t('NGBarcode.materialName')" prop="materialName">
                  <el-input v-model="state.queryForm.materialName" clearable :placeholder="$t('NGBarcode.enterMaterialName')" />
              </el-form-item>
              <el-form-item :label="$t('NGBarcode.materialSpecification')" prop="spec">
                  <el-input v-model="state.queryForm.spec" clearable :placeholder="$t('NGBarcode.enterMaterialSpecification')" />
              </el-form-item> -->

                <el-form-item :label="$t('NGBarcode.barcode')" prop="barcode">
                    <el-input v-model="state.queryForm.barcode" clearable :placeholder="$t('NGBarcode.enterBarcode')" />
                </el-form-item>

                <el-form-item :label="$t('NGBarcode.NGtime')" prop="ngdate">
                    <div class="block">
                        <el-date-picker v-model="ngdate" :clearable="false" type="daterange" unlink-panels
                            range-separator="To" start-placeholder="Start date" end-placeholder="End date"
                            :shortcuts="shortcuts" />
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button icon="el-icon-search" type="primary"
                        @click="dataquery">{{ $t('NGBarcode.query') }}</el-button>
                    <el-button icon="refresh" @click="resetQuery">{{ $t('NGBarcode.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <!--查询结果的列表-->
            <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
                :header-cell-style="tableStyle.headerCellStyle">
                <el-table-column fixed type="index" label="#" width="50" />
                <el-table-column fixed prop="currCartonNo" :label="$t('NGBarcode.currCartonNo')" width="300" />
                <el-table-column prop="currMaterialCode" :label="$t('NGBarcode.currMaterialCode')" width="250" />
                <el-table-column prop="currMaterialName" :label="$t('NGBarcode.currMaterialName')" width="250" />
                <el-table-column prop="currQty" :label="$t('NGBarcode.currQty')" width="100">
                    <template #default="scope">
                        <!--根据不同的状态选择不同的颜色的tag-->
                        <el-tag size="large" :type="'success'">
                            {{ scope.row.currQty }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="currOutputNo" :label="$t('NGBarcode.currOutputNo')" width="400" />
                <el-table-column prop="lastModifyTime" :label="$t('NGBarcode.NGtime')" width="250" />
                <el-table-column prop="lineCode" :label="$t('NGBarcode.lineCode')" width="250" />
                <el-table-column prop="lineName" :label="$t('NGBarcode.lineName')" width="250" />
                <el-table-column prop="locationCode" :label="$t('NGBarcode.locationCode')" width="250" />
                <el-table-column prop="locationName" :label="$t('NGBarcode.locationName')" width="250" />
                <el-table-column prop="locationType" :label="$t('NGBarcode.locationType')" width="250" />
            </el-table>
            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { BasicTableProps, useTable } from "/@/hooks/table";
import { getNGBarcodeDetailList } from "/@/api/platform/report/ngbarcode";
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
// 搜索变量
const queryRef = ref()

const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 30); // 今天之后的6天，总共一周
const ngdate = ref([endDate, today]);

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        },
    },
];
const getYMD = (date: any) => {
    // 获取年份
    const year = date.getFullYear();

    // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
    const month = String(date.getMonth() + 1).padStart(2, '0');

    // 获取日期
    const day = String(date.getDate()).padStart(2, '0');

    // 拼接成 yyyy-MM-dd 格式的字符串
    const formattedDate = `${year}-${month}-${day}`;

    return formattedDate;
};

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
        beginTime: ngdate.value ? getYMD(ngdate.value[0]) : '',
        endTime: ngdate.value ? getYMD(ngdate.value[1]) : '',
    },
    pageList: getNGBarcodeDetailList
})

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

const dataquery = () => {
    state.queryForm.beginTime = ngdate.value ? getYMD(ngdate.value[0]) : '';
    state.queryForm.endTime = ngdate.value ? getYMD(ngdate.value[1]) : '';
    getDataList();
};

// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    ngdate.value = '';
    state.queryForm.beginTime =  '';
    state.queryForm.endTime =  '';
    getDataList(false)
}

</script>